<%--
  Created by IntelliJ IDEA.
  User: 檬zhu
  Date: 2021/12/16
  Time: 16:04
  To change this template use File | Settings | File Templates.
--%>
<%@page import="java.util.List"%>
<%@ page import="com.example.ordersystem.domain.Dish" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css">

    <style type="text/css">
        fieldset {
            width: 500px;
            padding: 20px;
            margin: 30px 30px 30px 150px;
            border: 1px solid #ccc;
        }

        .submit {
            background: #32BAF0;
            opacity: 0.7;
            text-align : center;
            border-radius: 10px;
            color: #fff;
            font-size: 16px;
            width: 120px;
            height: 30px;
        }
        img {
            width: 200px;
            height: 200px;
        }
        p {
            color: red;
            font-size: 20px;
        }
    </style>
    <title></title>
</head>
<body>
<%
    Dish dish = (Dish)request.getAttribute("dish");
    if(request.getAttribute("newPicture")!=null){
        dish.setPicture((String)request.getAttribute("newPicture"));
    }
%>
<!-- 上传菜品的图片 -->
<form method="post" action="${pageContext.request.contextPath}/merchant/uploadDishPicture" enctype="multipart/form-data">

    <fieldset>
        <legend>菜品图片</legend>
        <input
                style="border-radius: 4px; border: 1px solid #ccc; background-color: #aaa;"
                type="file" name="picture" accept=image/* title="更改商品照片" />
        <img alt="" src="/<%=dish.getDisplayPicture()%>">
        <p>${picture_result}</p>
        <input type="submit" value="上传" class="submit"
               style="margin-left: 500px;">
    </fieldset>
</form>
<!--上传商品的其他信息-->
<form action="${pageContext.request.contextPath}/admin/updateDishDetail" method="get" class="layui-form">
    <!-- 商品所属类别 -->
    <fieldset>
        <div class="layui-form-item" style="width: 50%">
            <label class="layui-form-label">分类</label>
            <div class="layui-input-block">
                <select name="categoryNum" lay-verify="required">
                    <%
                        @SuppressWarnings("unchecked")
                        List<String> categories = (List<String>) request.getAttribute("categories");
                        for (int i = 0; i < categories.size(); ++i) {//显示所有商品的分类，value取编号,从1开始
                            if(i == dish.getCategoryNum()){ //定位商品的分类
                    %>
                    <option selected="selected" value="<%=i+1%>"><%=categories.get(i)%></option>
                    <%
                    }else{
                    %>
                    <option value="<%=i+1%>"><%=categories.get(i)%></option>
                    <%}} %>
                </select>
            </div>
        </div>
        <p>${category_result}</p>

        <!--菜品名称-->
        <div class="layui-form-item">
            <label class="layui-form-label">菜品</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required"
                       value="<%=dish.getName()%>" autocomplete="off" class="layui-input" style="width: 39%">
            </div>
        </div>
        <p>${name_result}</p>

        <!--菜品价格-->
        <div class="layui-form-item">
            <label class="layui-form-label">价格￥</label>
            <div class="layui-input-block">
                <input type="text" name="price" required lay-verify="required"
                       value="<%=dish.getPrice()%>"	autocomplete="off" class="layui-input" style="width: 39%">
            </div>
        </div>
        <p>${price_result}</p>

        <!--菜品描述-->
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">菜品描述</label>
            <div class="layui-input-block">
                <textarea name="description" class="layui-textarea"><%=dish.getDescription()%></textarea>
            </div>
        </div>
        <p>${description_result}</p>

        <input type="hidden" name="num" value="<%=dish.getNum()%>">
        <input type="submit" value="提交修改" class="submit"
               style="margin-left: 500px;" onclick="success()">
    </fieldset>
</form>

<script type="text/javascript" src="${pageContext.request.contextPath}/resources/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    layui.use(['form','layer'], function(){
        const form = layui.form;
        const layer = layui.layer;
    });
</script>
<script type="text/javascript">
    //查看商品详情介绍
    function success(){

        layer.msg('修改菜品成功', {
            time: 1000, //1s后自动关闭
            btn: ['明白了', '知道了', '哦']
        });
    }
</script>
</body>
</html>